import React from 'react';
import { ProductGroupSepC, PrimaryC, FirstHeaderC, SecondHeaderC, AdvancedSearch, DATA_ENTRY } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

class ProductGroupSepDemo extends React.Component {
  singe1 = ['28bfc1416fadb919016fb1480551005e', '38120ee0a19b43f0953033cbddb0ad85'];
  multy1 = ['28bfc1416fadb919016fb1480551005e', ['38120ee0a19b43f0953033cbddb0ad85', '1afda8c0399f45e19fda5036179575b1']];
  singe2 = ['028da06e43d94c38aec8951fec735a13', '160ceb0f7daf4a74b4ff89f3b38e37c2'];
  multy2 = ['028da06e43d94c38aec8951fec735a13', ['160ceb0f7daf4a74b4ff89f3b38e37c2', '42ac099886c141b29fba36018d7c939d']];

  constructor(props) {
    super(props);
    this.state = {
      init2: undefined,
      init4: undefined,
    };

    setTimeout(() => {
      this.setState({
        init2: this.singe1,
        init4: this.multy1,
      });
    }, 3000);
  }

  onClick1 = () => {
    this.state.ProductGroupSepC1.setSelect(this.singe2);
  };

  onClick2 = () => {
    this.state.ProductGroupSepC2.setSelect(this.singe2);
  };

  onClick3 = () => {
    this.state.ProductGroupSepC3.setSelect(this.multy2);
  };

  onClick4 = () => {
    this.state.ProductGroupSepC4.setSelect(this.multy2);
  };

  onClick5 = () => {
    this.state.ProductGroupSepC5.setSelect(this.multy2);
  };

  onQuery = (e) => {
    console.log('查询', e);
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <div style={{ width: '900px' }}>
          <FirstHeaderC title='单选' />
          <SecondHeaderC title='1. 同步初始化' />
          <ProductGroupSepC
            form={this.props.form}
            dataIndex={['product1', 'group1']}
            multipleGroup={false}
            initialValue={this.singe1}
            productOnChange={(e) => console.log('产品1', e)}
            groupOnChange={(e) => console.log('组合1', e)}
            onRef={(ref) => this.setState({ ProductGroupSepC1: ref })}
          />
          <PrimaryC onClick={this.onClick1} title='更改数据' />
          <SecondHeaderC title='2. 异步初始化' />
          <ProductGroupSepC
            form={this.props.form}
            dataIndex={['product2', 'group2']}
            multipleGroup={false}
            initialValue={this.state.init2}
            productOnChange={(e) => console.log('产品2', e)}
            groupOnChange={(e) => console.log('组合2', e)}
            onRef={(ref) => this.setState({ ProductGroupSepC2: ref })}
          />
          <PrimaryC onClick={this.onClick2} title='更改数据' />
          <SecondHeaderC title='5. 无初始化' />
          <ProductGroupSepC
            form={this.props.form}
            dataIndex={['product5', 'group5']}
            multipleGroup={false}
            productOnChange={(e) => console.log('产品5', e)}
            groupOnChange={(e) => console.log('组合5', e)}
            onRef={(ref) => this.setState({ ProductGroupSepC5: ref })}
          />
          <PrimaryC onClick={this.onClick5} title='更改数据' />

          <FirstHeaderC title='组合多选' topHeight={true} />
          <SecondHeaderC title='3. 同步初始化' />
          <ProductGroupSepC
            form={this.props.form}
            dataIndex={['product3', 'group3']}
            initialValue={this.multy1}
            productOnChange={(e) => console.log('产品3', e)}
            groupOnChange={(e) => console.log('组合3', e)}
            onRef={(ref) => this.setState({ ProductGroupSepC3: ref })}
          />
          <PrimaryC onClick={this.onClick3} title='更改数据' />
          <SecondHeaderC title='4. 异步初始化' />
          <ProductGroupSepC
            form={this.props.form}
            dataIndex={['product4', 'group4']}
            initialValue={this.state.init4}
            productOnChange={(e) => console.log('产品4', e)}
            groupOnChange={(e) => console.log('组合4', e)}
            onRef={(ref) => this.setState({ ProductGroupSepC4: ref })}
          />
          <PrimaryC onClick={this.onClick4} title='更改数据' />
          <SecondHeaderC title='5. 异步初始化(设置交易模式)' />
          <ProductGroupSepC
            form={this.props.form}
            dataIndex={['product5', 'group5']}
            initialValue={this.state.init4}
            productOnChange={(e) => console.log('产品5', e)}
            groupOnChange={(e) => console.log('组合5', e)}
            tradeModel={['BOOKKEEPING_MODE', 'COMMAND_MODE', 'VALUATION_BOOKKEEPING_MODEL']} //产品组定义不支持选估值解析模式的产品
          />
        </div>

        <FirstHeaderC title='查询组件' topHeight={true} />
        <AdvancedSearch
          dataSource={[
            // {
            //     dataIndex: 'input1',
            //     title: '数字',
            //     type: DATA_ENTRY.INPUTNUMBER,
            // },
            // {
            //     dataIndex: 'input2',
            //     title: '数字',
            //     type: DATA_ENTRY.INPUTNUMBER,
            // },
            // {
            //     dataIndex: 'input3',
            //     title: '数字',
            //     type: DATA_ENTRY.INPUTNUMBER,
            // },
            {
              dataIndex: ['product6', 'group6'],
              type: DATA_ENTRY.PRODUCTGROUPSEP,
              multipleGroup: false,
            },
            {
              dataIndex: 'input4',
              title: '数字',
              type: DATA_ENTRY.INPUTNUMBER,
            },
            {
              dataIndex: 'input5',
              title: '数字',
              type: DATA_ENTRY.INPUTNUMBER,
            },
            // {
            //     dataIndex: ['product7','group7'],
            //     type: DATA_ENTRY.PRODUCTGROUPSEP,
            // },
          ]}
          onQuery={this.onQuery}
        />
        {/* <h2>产品、组合联动,组合多选</h2> */}
        {/* <ProductGroupSepC
                    form={this.props.form}
                    dataIndex={['product1','group1']}
                    rules = {[[{required: true,message: '请选择产品!'}],[{required: true,message: '请选择组合!'}]]}
                    helper={['lalal', 'yyay']}
                    initialValue={this.state.init4}
                    productOnChange={e=>console.log(e)}
                    groupOnChange={e=>console.log(e)}
                    onRef = {ref => this.setState({ProductGroupSepC1: ref})}
                /> */}
        {/* <PrimaryC onClick={this.onClick4} title='玄武三号'/>
                <h2>产品、组合联动,组合单选</h2> */}
        {/* <ProductGroupSepC
                    form={this.props.form}
                    dataIndex={['product2','group2']}
                    multipleGroup={false}
                    initialValue={this.state.init5}
                    productOnChange={e=>console.log('产品',e)}
                    groupOnChange={e=>console.log('组合',e)}
                    onRef = {ref => this.setState({ProductGroupSepC2: ref})}
                    formItemLayout={{
                        labelCol: {
                            span: 8, offset: 2
                        },
                        wrapperCol: {
                            span: 12, offset: 2
                        }
                        }}
                    authority={'write'}
                /> */}
        {/* <PrimaryC onClick={this.onClick5} title='玄武三号'/>
                <div style={{width:'450px', border:'1px solid lightblue'}}>
                    <h2>产品、组件纵向布局</h2>
                    <ProductGroupSepC
                        form={this.props.form}
                        dataIndex={['product3','group3']}
                        rules = {[[{required: true,message: '请选择产品!'}],[{required: true,message: '请选择组合!'}]]}
                        helper={['lalal', 'yyay']}
                        initialValue={this.state.init4}
                        productOnChange={e=>console.log(e)}
                        groupOnChange={e=>console.log(e)}
                        direction='column'
                        maatApi={true}
                    />
                </div> */}
      </div>
    );
  }
}

export default Form.create()(ProductGroupSepDemo);
